<template>
	<view class="container">
		<view class="header">
			<view class="header-return" @click="returnclick()"></view>
			<view class="header-title">{{$store.state.user.personal.nickName}}</view>
		</view>
		<view class="body">
			<view class="body-ask" >
				<view class="body-ask-title">
					发起追问
				</view>
				<view class="body-ask-describe">
					<view class="body-ask-asterisk"></view>
					<uni-easyinput type="textarea" maxlength='500' autoHeight v-model="describe" placeholder="请在此处描述您的问题"></uni-easyinput>
				</view>
				<view class="body-voice" v-if="!askconsult">
					<Voice></Voice>
				</view>
				<view class="" v-else></view>
				<view class="body-ask-picture">
					<view class="body-ask-picture-main">
						<view class="body-ask-picture-top">
							<view class="body-ask-picture-title">添加图片</view>
							<view class="body-ask-picture-total">({{total}}/6)</view>
						</view>
						<uni-file-picker
							style="margin: 0 0 0 4vw;"
							v-model="imageValue"  
							fileMediatype="image" 
							@select="select"
							@delete="deleteit" 
							limit="6"
							file-extname="png,jpg"
							v-if="pictureshow"
						/>
					</view>
				</view>
			</view>
		</view>
		<view class="body-button" @click="result()">
			发起追问
		</view>
		<!-- 弹出 -->
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="popup-close" @click="closepopup()"></view>
				<view class="popup-title">{{popup.title}}</view>
				<view class="popup-text">{{popup.text}}</view>
				<view class="popup-button" @click="closepopup()">{{popup.button}}</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Voice from '@/components/Voice'
	import { getQuestioncloselyAskAgain, getCounselingcloselyAskAgain, getCommonUploadsmp3, getCommonUploads, getCommonUpload, getQuestionsAskQuestion, uploadAvatar} from "@/api/index";
	import { pathToBase64, base64ToPath } from 'image-tools'
	export default {
		components: {
			Voice
		},
		data() {
			return {
				period: -1,
				subject: -1,
				describe: '',
				popup:{
					title:'提问失败',
					text:'提问失败',
					button:'确定',
				},
				periodlist: this.$store.state.user.periodlist,
				subjectlist: [],
				filePathsList: [],
				picturelist: [],
				imgUrl: [],
				imageValue: [],
				total: 0,
				askconsult: true,
				questionid: 0,
				loading: false,
				pictureshow: true,
			}
		},
		computed: {
		   refresh() {
		      return this.$store.state.user.refresh
		   }
		},
		watch: {
			refresh: {
				immediate: true,
				handler: function(newval) {
					// console.log("newval",newval)
					this.Initialize()
				}
			}
		},
		computed: {
		   refresh() {
		      return this.$store.state.user.refresh
		   }
		},
		watch: {
			refresh: {
				immediate: true,
				handler: function(newval) {
					// console.log("newval",newval)
					this.Initialize()
				}
			}
		},
		created() {
		   this.Initialize()
		},
		methods: {
			Initialize(){
				this.askconsult = this.$store.state.user.askconsult
				this.questionid = this.$store.state.user.questionid
				// console.log("askconsult",this.askconsult)
				// console.log("questionid",this.questionid)
				
				this.pictureshow=false
				this.$nextTick(()=>{
					this.pictureshow=true
				})
				this.describe = ''
			},
			select(e){
				for(let i in e.tempFilePaths){
					this.total++
					let data = e.tempFilePaths[i]
					pathToBase64(data).then(path => {
						this.picturelist.push({uuid: e.tempFiles[i].uuid, name: 'avatarfile', filePath: path})
					})
				}
				
			},
			deleteit(e){
				this.total--
				let list = []
				for(let i in this.picturelist){
					if(this.picturelist[i].uuid!=e.tempFile.uuid){
						list.push(this.picturelist[i])
					}
				}
				this.picturelist = list
			},
			async pictureclick(){
				console.log("this.picturelist",this.picturelist)
				this.imgUrl = []
				for(let i in this.picturelist){
					// let data = {name: 'avatarfile', filePath: this.picturelist[i].filePath}
					let data = {name: 'files', filePath: this.picturelist[i].filePath}
					// await uploadAvatar(data).then(res => {
					await getCommonUploads(data).then(res => {
						this.imgUrl.push(res.fileNames)
					})
				}
				console.log("this.imgUrl",this.imgUrl)
				let questionPicture = '' 
				for(let i in this.imgUrl){
					if(i==0){
						questionPicture=this.imgUrl[i]
					}else{
						questionPicture+=';'+this.imgUrl[i]
					}
				}
				await this.dealvoicelist()
				let vlist = this.$store.state.user.voicelist
				let questionVoice=''
				for(let i in vlist){
					if(i==0){
						questionVoice=vlist[0].url
					}else{
						questionVoice+=';'+vlist[i].url
					}
				}
				
				
				if(this.askconsult){
					let data = {
						"questionsId": this.questionid,
						"question": this.describe,
						"questionPicture": questionPicture,						
					}
					await getQuestioncloselyAskAgain(data).then(res => {
						if(res.msg=="操作成功"){
							this.$store.state.user.refresh=!this.$store.state.user.refresh
							this.$router.push('/pages/mine/result')
						}
					});
				}else{
					let data = {
						"psychologicalCounselingId": this.questionid,
						"question": this.describe,
						"questionPicture": questionPicture,
						"questionVoice": questionVoice,
						
					}
					await getCounselingcloselyAskAgain(data).then(res => {
						if(res.msg=="操作成功"){
							this.$store.state.user.refresh=!this.$store.state.user.refresh
							this.$router.push('/pages/mine/result')
						}
					});
				}
			},
			async dealvoicelist(){
				let voicelist = this.$store.state.user.voicelist
				for(let i in voicelist){
					let data = {name: 'files', filePath: voicelist[i].base64}
					await getCommonUploadsmp3(data).then(res => {
						voicelist[i].url = res.fileNames
					})
				}
				this.$store.state.user.voicelist = voicelist
			},
			handleSelect(e){
				console.log("handleSelect",e)
			},
			handleDelete(e){
				console.log("handleDelete",e)
			},
			returnclick(){
				this.$router.push('/pages/mine/index')
			},
			result(){
				if(this.loading){
					return
				}else{
					this.loading = true
					this.commonuploads()
				}
			},
			commonuploads(){
				if(!this.describe){
					this.popup.text = '未填写问题描述'
				}
				
				if(this.describe){
					this.pictureclick()
				}else{
					this.$refs.popup.open('center')
					this.loading = false
				}	
			},
			open(){
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
			},
			closepopup(){
				this.$refs.popup.close()
			}
		},
	}
</script>

<style>
	.container {
		font-size: 4vw;
		width: 100vw;
		height: 100vh;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 1fr; */
		grid-template-rows: 12.5vw auto 12.5vw;
	}
	.header{
		width: 100%;
		height: 12.5vw;
		background: #ffffff;
		border: 1px solid #F6F7F8;
		display: grid;
		justify-items: center;
		align-items: center;
		/* grid-template-columns: 1fr; */
		/* grid-template-rows: 1fr 1fr; */
	}
	.header-title{
		font-size: 5vw;
	}
	.header-return{
		position: absolute;
		width: 5vw;
		height: 5vw;
		left: 5vw;
		top: 3.5vw;
		background: url(../../static/index/return.svg);
		background-size: 100% 100%;
		cursor: pointer;
	}
	.body{
		margin: 0 0 0 0;
		width: 100%;
		height: 100%;
		display: grid;
		justify-items: center;
		align-items: start;
		/* grid-template-columns: 1fr; */
		/* grid-template-rows: 148vw 24vw; */
	}
	.body-ask{
		margin: 2vw 0 0 0;
		padding: 2vw;
		width: 96%;
		border-radius: 2vw;
		height: auto;
		display: grid;
		justify-items: start;
		align-items: center;
		/* grid-template-columns: 1fr; */
		grid-template-rows: 10vw auto auto auto 1fr;
		background: #ffffff;
	}
	.body-ask-title{
		padding: 0 0 0 3vw;
		font-size: 4.5vw;
		font-weight: 600;
	}
	.body-ask-hint{
		display: flex;
		color: #515257;
	}
	.body-ask-asterisk{
		margin: 1.6vw 1vw 0 0;
		width: 2vw;
		height: 2vw;
		background: url(../../static/aqc/asterisk.svg);
		background-size: 100% 100%;
	}
	/deep/ .uni-textarea-compute{
		height: 30vw;
	}
	.body-ask-period{
		margin: 2vw 0 2vw 0;
		width: 100%;
		height: 100%;
		display: grid;
		justify-items: center;
		align-items: center;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		/* grid-template-rows: 1fr; */
	}
	.body-ask-period-piece{
		margin: 0 1vw 0 1vw;
		width: 16vw;
		height: 5.6vw;
		border-radius: 0.5vw;
		display: grid;
		justify-items: center;
		align-items: center;
		font-size: 3.5vw;
		color: #515257;
		background: #F6F7F7;
		cursor: pointer;
	}
	.select{
		color: #ffffff;
		background: #1492FF;
	}
	.body-ask-hint{
		
	}
	.body-ask-subject{
		margin: 2vw 0 2vw 0;
		width: 100%;
		height: 100%;
		display: grid;
		justify-items: center;
		align-items: center;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	}
	.body-ask-subject-piece{
		margin: 0 1vw 0 1vw;
		width: 16vw;
		height: 5.6vw;
		border-radius: 0.5vw;
		display: grid;
		justify-items: center;
		align-items: center;
		font-size: 3.5vw;
		color: #515257;
		background: #F6F7F7;
		cursor: pointer;
	}
	.select{
		color: #ffffff;
		background: #1492FF;
	}
	.body-ask-describe{
	    margin: 5vw 0 2vw 0;
		width: 100%;
		height: auto;
		display: flex;
	}
	/deep/ .uni-textarea-placeholder{
		font-size: 4vw;
	}
	/deep/ .uni-textarea-textarea{
		line-height: 5vw;
		font-size: 4vw;
	}
	.body-voice{
		/* padding: 2vw 2vw 2vw 2vw; */
		width: auto;
		height: auto;
		background: #ffffff;
	}
	.body-ask-picture{
		width: 100%;
		height: 100%;
		/* display: grid; */
		/* justify-items: center; */
		/* align-items: center; */
		/* grid-template-rows: 10vw 1fr; */
	}
	.body-ask-picture-text{
		margin: 0 0 0 2vw;
		width: 100%;
		display: grid;
		/* justify-items: center; */
		align-items: center;
		grid-template-columns: 30vw auto 1fr;
	}
	.body-ask-picture-main{
		width: 90vw;
		height: auto;
		/* display: grid;
		grid-template-columns: 30vw 30vw 30vw; */
	}
	.body-ask-picture-top{
		margin: 0 0 0 3vw;
		height: 10vw;
		display: grid;
		/* justify-items: center; */
		align-items: center;
		grid-template-columns: 18vw auto;
	}
	.body-ask-picture-total{
		font-size: 4vw;
		color: #B3B5B9;
	}
	/deep/ .uni-file-picker__header{
		width: 27vw;
	}
	/deep/ .file-title{
		font-size: 4vw;
	}
	/deep/ .file-count{
		font-size: 4vw;
		height: 6vw;
		display: grid;
		justify-items: center;
		align-items: center;
	}
	/deep/ .uni-file-picker__container{
		width: 90vw;
		/* height: 20vw; */
	}
	.body-button{
		margin: 1.25vw auto 1.25vw auto;
		width: 95vw;
		height: 10vw;
		border-radius: 5vw;
		display: grid;
		justify-items: center;
		align-items: center;
		/* font-size: 4vw; */
		color: #ffffff;
		background: #1492FF;
		cursor: pointer;
	}
	
	.popup{
		width: 60vw;
		height: 40vw;
		background: #ffffff;
		position: absolute;
		margin-left: -30vw;
		margin-top: -20vw;
		border-radius: 2.2vw;
		
		display: grid;
		justify-content: center;
		align-items: center;
		grid-template-rows: 5vw 5vw 15vw 15vw;
	}
	.popup-close{
		margin: 2vw 0 0 55vw;
		width: 3vw;
		height: 3vw;
		background: url(../../static/index/close.svg);
		background-size: 100% 100%;
		cursor: pointer;
	}
	.popup-title{
		display: grid;
		justify-content: center;
		align-items: center;
		font-weight: 600;
		font-size: 4vw;
	}
	.popup-text{
		margin: 0 5vw 0 05vw;
		width: 50vw;
		display: grid;
		justify-content: center;
		align-items: center;
		font-size: 3.4vw;
	}
	.popup-button{
		margin: 0 5vw 0 5vw;
		width: 50vw;
		height: 8vw;
		border-radius: 4vw;
		display: grid;
		justify-content: center;
		align-items: center;
		color: #ffffff;
		background: #1492FF;
		cursor: pointer;
	}
	
	.vue-cropper{
		margin: 2vw;
		width: 26vw;
		height: 26vw;
	}
	.uploadbutton{
		float: left;
		margin: 2vw;
		width: 26vw;
		height: 26vw;
		border-width: 1px;
		border-style: solid;
		border-color: rgb(238, 238, 238);
		border-radius: 3px;
	}
	.cross{
		position: relative;
		top: calc(50% - 0.15vw);
		left: calc(50% - 5vw);
		width: 10vw;
		height: 0.3vw;
		background: rgb(238, 238, 238);
		/* background: #000000; */
	}
	.vertical{
		position: relative;
		top: calc(50% - 5vw);
		left: calc(50% - 0.15vw);
		width: 0.3vw;
		height: 10vw;
		/* background: #000000; */
		background: rgb(238, 238, 238);
	}
</style>